window.addEventListener('load', function () {
    var progress = document.querySelector('#progress');
    var progress_bar = document.querySelector('#progress_bar')
    var pro_bar_flg = document.querySelector('#progress_bar_flg');
    var pro_bar_val = document.querySelector('#progress_bar_value');
    var pro_val = document.querySelector('#progress_value');

    // var flgxLeft = pro_bar_flg.offsetLeft;

    pro_bar_flg.addEventListener('mousedown', function (e) {
        var flgx = e.pageX - pro_bar_flg.offsetLeft;
        document.addEventListener('mousemove', move);

        function move(e) {

            var x = e.pageX - flgx;
            //当pro_bar_flg.style.left 大于 progress_bar.offset.Width
            if (x > progress_bar.offsetWidth - pro_bar_flg.offsetWidth) {
                x = progress_bar.offsetWidth - pro_bar_flg.offsetWidth;
            } else if (x <= 0) {
                x = 0;
            }
            pro_bar_flg.style.left = x + 'px';
            pro_bar_val.style.width = x + 'px';
            pro_val.innerText = Math.round(x / (progress_bar.offsetWidth - pro_bar_flg.offsetWidth) * 100) + '%';
            console.log();

        }

        document.addEventListener('mouseup', function () {
            document.removeEventListener('mousemove', move);
        })
    })


})